<template>
  <div class="cascader-container">
    <div class="ant-cascader-picker ant-cascader-picker-show-search">
      <span class="ant-cascader-picker-label"></span>
      <input placeholder="Please select" type="text" @focus="focusCascaderInput" @blur="blurCascaderInput" class="ant-input ant-cascader-input">
      <!-- <a-icon type="close-circle" theme="filled" class="ant-cascader-picker-clear" /> -->
      <a-icon type="down" class="ant-cascader-picker-arrow" />
      <!-- <a-icon type="up" /> -->
    </div>
    <div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" v-if="isFocus">
      <div class="ant-cascader-menus-content">
        <ul class="ant-cascader-menu">
          <li
            role="menuitem"
            v-for="(item,index) in options"
            :key="item.code + index"
            @click.stop="tapCascader(item,index)"
            :title="item.name"
            :class="['ant-cascader-menu-item ant-cascader-menu-item-expand', currentValue[0]&&currentValue[0].code==item.code?'ant-cascader-menu-item-active':'']">
            {{ item.name }} <span class="ant-cascader-menu-item-expand-icon" v-if="item&&!item.isLeaf"> <a-icon :type="item.loading&&item.loading?'loading':'right'" /> </span>
          </li>
        </ul>
        <ul class="ant-cascader-menu" v-if="activeIndexs.length && options[activeIndexs[0]]&&options[activeIndexs[0]].children.length">
          <li
            role="menuitem"
            v-for="(item,index) in options[activeIndexs[0]].children"
            @click.stop="tapCascader(item,index)"
            :key="item.code + index"
            :title="item.name"
            :class="['ant-cascader-menu-item ant-cascader-menu-item-expand', currentValue[1]&&currentValue[1].code==item.code?'ant-cascader-menu-item-active':'']">
            {{ item.name }} <span class="ant-cascader-menu-item-expand-icon" v-if="item&&!item.isLeaf"> <a-icon :type="item.loading&&item.loading?'loading':'right'" /> </span>
          </li>
        </ul>
        <ul class="ant-cascader-menu" v-if="activeIndexs.length && options[activeIndexs[1]]&&options[activeIndexs[1]].children.length">
          <li
            role="menuitem"
            v-for="(item,index) in options[activeIndexs[1]].children"
            @click.stop="tapCascader(item,index)"
            :key="item.code + index"
            :title="item.name"
            :class="['ant-cascader-menu-item ant-cascader-menu-item-expand', currentValue[2]&&currentValue[2].code==item.code?'ant-cascader-menu-item-active':'']">
            {{ item.name }} <span class="ant-cascader-menu-item-expand-icon" v-if="item&&!item.isLeaf"> <a-icon :type="item.loading&&item.loading?'loading':'right'" /> </span>
          </li>
        </ul>
        <!-- <ul class="ant-cascader-menu">
          <li role="menuitem" title="West Lake" class="ant-cascader-menu-item ant-cascader-menu-item-active">
            West Lake
          </li>
          <li role="menuitem" title="Xia Sha" class="ant-cascader-menu-item ant-cascader-menu-item-disabled">
            Xia Sha
          </li>
        </ul> -->
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Vue from 'vue'
import { ACCESS_LOGIN_USER_INFO } from '@/store/mutation-types'
import { PlatformAutoComplete, StoreAutoComplete, MerhantAutoComplete } from '@/api/meta'
export default {
  data () {
    return {
      options: [],
      isFocus: false,
      currentValue: [],
      activeIndexs: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    cascaderLevel () {
      const level = this.userInfo && this.userInfo.user_level || '1'
      return level
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    /**
     * 设计流程步骤：
     * 1、当输入框获取焦点时 调接口获取数据
     *
     */
    focusCascaderInput () {
      this.isFocus = true
      console.log(this.options[0], this.currentValue, '数据源')
    },
    blurCascaderInput () {
      //   this.isFocus = false
    },
    tapCascader (item, index) {
      console.log(item, index)
      const self = this
      this.options[index].loading = true
      // eslint-disable-next-line eqeqeq
      this.initOptions(item.level == '1' ? '2' : '3', item.code).then((result) => {
        self.options[index].children = result
        self.options[index].loading = false
        self.activeIndexs = [index]
        self.currentValue[+item.level - 1] = {
          name: item.name,
          code: item.code,
          level: item.level
        }
      })
    },
    onChange (value) {
      console.log(value, 'onChange')
    },
    loadData (val) {
      console.log(val, 'loadData')
    },
    init () {
      this.initOptions(this.cascaderLevel).then(result => {
        this.options = result
      })
    },
    initOptions (level, code) {
      const LoginParameter = Vue.ls.get(ACCESS_LOGIN_USER_INFO)
      return new Promise(resolve => {
        if (level === '1') {
          PlatformAutoComplete().then((result) => {
            result.forEach(el => {
              el.isLeaf = false
              el.loading = false
              el.level = '1'
              el.children = []
            })
            resolve(result)
          })
        } else if (level === '2') {
          MerhantAutoComplete({ platform_code: code || LoginParameter.platform_code }).then((result) => {
            result.forEach(el => {
              el.isLeaf = false
              el.loading = false
              el.level = '2'
              el.children = []
            })
            resolve(result)
          })
        } else if (level === '3') {
          StoreAutoComplete({ merchant_code: code || LoginParameter.merchant_code }).then((result) => {
            result.forEach(el => {
              el.isLeaf = false
              el.loading = false
              el.level = '3'
              el.children = []
            })
            resolve(result)
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.cascader-container {
  position: relative;
  .ant-cascader-picker {
    display: flex;
    align-items: center;
    width: 300px;
  }
  .ant-cascader-menus {
    top: 38px;
    .ant-cascader-menu-item {
      width: 111px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
